<template>
    <div class="app-container">
      <div style="padding: 5px 0px">
        <toolbar :table="$refs.table" :moduleCode="$enums.moduleType.customer.value" @add="handleEdit"
          @delete="handleDelete" @refresh="handleRefresh" @export="handleExport" @import="handleImport"
          :buttons="['add', 'delete', 'export', 'import', 'log', 'search']">
          <template v-slot:search-slot>
            <span style="padding-left: 5px">
              <el-input v-model="filter.keyword" placeholder="请输入关键字" style="width: 200px" size="mini"
                clearable></el-input>
            </span>
            <span>
              <customer-select v-model="filter.customerId" style="width: 200px" size="mini"></customer-select>
            </span>
            <span>
              <currency-select v-model="filter.currencyId" style="width: 200px" size="mini"></currency-select>
            </span>
            <span style="padding-left: 5px"><el-button type="primary" size="mini"
                @click="handleSearch">搜索</el-button></span>
          </template>
        </toolbar>
      </div>
      <div>
        <el-table :data="list" border fit highlight-current-row ref="table" size="small" @cell-dblclick="hanldeDbClick">
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="编码">
            <template slot-scope="scope">
              {{ scope.row.code }}
            </template>
          </el-table-column>
          <el-table-column label="名称">
            <template slot-scope="scope">
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column label="客户">
            <template slot-scope="scope">
              {{ scope.row.customerName }}
            </template>
          </el-table-column>
          <el-table-column label="币别">
            <template slot-scope="scope">
              {{ scope.row.currencyName }}
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleEdit(scope.row.id)">{{ $t("common.edit") }}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="float: right">
        <el-pagination @size-change="handleSizeChange" @current-change="handlePageChange"
          :current-page.sync="filter.pageIndex" :page-sizes="[10, 20, 50, 100, 200, 500]"
          :page-size.sync="filter.pageSize" :prev-click="handlePrePage" :next-click="handleNextPage"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
      <export-panel v-show="false" ref="export" :moduleCode="$enums.moduleType.customer.value"></export-panel>
    </div>
  </template>
  
  <script>
  import toolbar from "@/components/Bar/toolbar.vue";
  import edit from "./edit.vue";
  import { getProductPrices, deleteProductPrice } from "@/api/sale/productPrice";
  import customerSelect from "@/components/Select/customerSelect.vue"
  import currencySelect from "@/components/Select/currencySelect.vue"
  import importPanel from "@/components/Import/index.vue";
  import exportPanel from "@/components/Export/index.vue";
  export default {
    components: {
      toolbar,
      edit,
      importPanel,
      exportPanel,
      customerSelect,
      currencySelect
    },
    data() {
      return {
        list: null,
        filter: {
          pageIndex: 1,
          pageSize: 10,
          keyword: "",
          customerId: null,
          currencyId: null
        },
        total: 0,
        importDrawer: false,
      };
    },
    mounted() {
      this.getData();
    },
    methods: {
      getData() {
        getProductPrices(this.filter).then((res) => {
          res = res || { totalCount: 0, items: [] };
          this.total = res.totalCount;
          this.list = res.items;
        });
      },
      handlePageChange(pageIndex) {
        this.filter.pageIndex = pageIndex;
        this.getData();
      },
      handleSizeChange(pageSize) {
        this.filter.pageSize = pageSize;
        this.getData();
      },
      handlePrePage(currentPageIndex) {
        this.filter.pageIndex = currentPageIndex - 1;
      },
      handleNextPage(currentPageIndex) {
        this.filter.pageIndex = currentPageIndex + 1;
      },
      handleEdit(id) {
        let query = {};
        if (id)
          query = { id: id }
        this.$router.push({
          name: "SaleProductPriceEdit",
          query: query
        });
      },
      handleDelete({ ids }) {
        if (!ids || ids.length == 0) return;
        for (let i = 0; i < ids.length; i++) {
          getProductPrices(ids[i]).then((res) => {
            if (i == ids.length - 1) {
              this.$notify({
                title: "成功",
                message: "删除成功",
                type: "success",
                position: "bottom-right",
              });
              this.getData();
            }
          });
        }
      },
      hanldeDbClick(row) {
        this.handleEdit(row.id)
      },
      handleSearch() {
        this.handleRefresh();
      },
      handleRefresh() {
        this.pageIndex = 1;
        this.pageSize = 10;
        this.getData();
      },
      handleExport() {
        this.$refs.export.exportData();
      },
      handleImport() {
        this.importDrawer = true;
      },
    },
    computed: {},
  };
  </script>